<template>
  <div class="newreports">
    <div :span="24" class="header_col">
      <div class="task_list_left_top_name">
        <div class="icon_box">
          <i class="iconfont icon-yueyongdianliangbili"></i>
        </div>

        <div class="name">新建核算报告</div>
      </div>
      <div class="task_list_left_top_btn" @click="changeTask">
        <a-button @click="handleSubmit">生成核算报告</a-button>
      </div>
    </div>
    <a-spin :spinning="confirmLoading">
      <a-form-model
        class="form-model"
        ref="form"
        v-bind="layout"
        :model="model"
        :rules="validatorRules"
        style="padding:0 30px"
      >
        <a-form-model-item label="报告名称" required prop="name">
          <a-input v-model="model.data1" placeholder="请输入报告名称" />
        </a-form-model-item>
        <a-form-model-item label="单位名称" required prop="unit">
          <a-input v-model="model.data2" placeholder="请输入单位名称" />
        </a-form-model-item>

        <a-form-model-item label="报告模板" required>
          <a-select
            placeholder="选择报告模板"
            v-decorator="['reportDemo', { rules: [{ required: true, message: '选择报告模板必须填写' }] }]"
          >
            <a-select-option value="1">国家发展改革委办公厅印发标准模板</a-select-option>
            <a-select-option value="2">各省份颁发的模板标准</a-select-option>
            <a-select-option value="3">ISO 14064 排放模板</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="核算任务" required style="text-align:left">
          <a-button @click="addTaks">添加任务</a-button>
          <div class="current_task">
            <div class="name">核算任务：</div>
            <ul>
              <li v-for="(item,index) in 12" :key="index">
                新技术园区填报2022-01-01
                <i class="iconfont icon-quxiao3"></i>
              </li>
            </ul>
          </div>
          <!-- <a-input v-model="model.data1" placeholder="请输入单位名称" /> -->
        </a-form-model-item>

        <a-form-model-item label="上传附件" required style="text-align:left">
          <a-upload
            v-decorator="[
          'upload',
          {
            valuePropName: 'fileList',
            getValueFromEvent: normFile,
          },
        ]"
            name="logo"
            action="/upload.do"
            list-type="picture"
          >
            <a-button>
              <a-icon type="upload" />上传附件
            </a-button>
          </a-upload>
        </a-form-model-item>
        <a-form-model-item label="描述" prop="description">
          <a-textarea
            class="textarea"
            :rows="5"
            :cols="5"
            v-model="model.description"
            placeholder="请输入角色描述"
          />
        </a-form-model-item>
      </a-form-model>
    </a-spin>
    <TaskList ref="addNewReportTask"></TaskList>
  </div>
</template>

<script>
import TaskList from "./NewReports/taskList.vue";
export default {
  data() {
    return {
      layout: {
        labelCol: { span: 3 },
        wrapperCol: { span: 14 }
      },
      model: {},
      queryParam: {},
      confirmLoading: false,
      validatorRules: {
        name: [{ required: true, message: "请输入报告名称!" }],
          unit: [{ required: true, message: "请输入单位名称!" }],
        roleCode: [
          { required: true, message: "请输入角色名称!" },
          { min: 0, max: 64, message: "长度不超过 64 个字符", trigger: "blur" },
          { validator: this.validateRoleCode }
        ],

        description: [
          {
            min: 0,
            max: 126,
            message: "长度不超过 126 个字符",
            trigger: "blur"
          }
        ]
      }
    };
  },
  components:{
      TaskList
  },
  methods: {
    changeTask() {},
    searchQuery() {},
    addTaks(){
         this.$refs.addNewReportTask.visible = true;
    },
    handleSubmit(e) {
      this.$refs.form.validate(valid => {
          //   console.log(valid)
      });
    }
  }
};
</script>

<style lang="scss">
@import "@/assets/css/newreports.scss";

</style>